<template>
  <div>
    <el-card :bordered="false" dis-hover class="ivu-mt">
      <el-form
        ref="thisForm"
        :model="thisForm"
        label-width="75px"
        label-position="right"
        inline
        @submit.native.prevent
      >
        <el-form-item label="审核状态：">
          <el-radio-group v-model="thisForm.status" type="button" @change="userSearchs">
            <el-radio-button v-for="item in statusList" :label="item.val">{{ item.label }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="时间：" label-for="time_type">
          <el-date-picker
            @change="onchangeTime"
            v-model="timeVal"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="mr20"
            :picker-options="options"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <el-table
        :data="lists"
        ref="table"
        class="mt25"
        :loading="loading"
        highlight-row
        no-userFrom-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
      >
        <el-table-column label="Id" min-width="80" fixed="left" #default="{row}">{{row.id}}</el-table-column>
        <el-table-column label="昵称" min-width="100" #default="{row}">{{row.nickname}}</el-table-column>
        <el-table-column label="联系电话" min-width="100" #default="{row}">{{row.phone}}</el-table-column>
        <el-table-column label="评价内容" min-width="180">
          <template slot-scope="{row, index}">{{row.content}}</template>
        </el-table-column>
        <el-table-column label="反馈图片" #default="{row}">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.imgsArray[0]"
            :preview-src-list="row.imgsArray"
          ></el-image>
        </el-table-column>
        <el-table-column label="问题类型" min-width="100" #default="{row}">{{row.type}}</el-table-column>
        <el-table-column label="处理状态" min-width="120">
          <template slot-scope="{ row, index }" >
            <el-tag type="info" v-if="row.status==0">未处理</el-tag>
            <el-tag type="success" v-else-if="row.status==10">已处理</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="反馈时间" min-width="150" #default="{row}">{{row.addTimeStr}}</el-table-column>
        <el-table-column label="操作" min-width="150">
          <template slot-scope="{ row, index }">
            <span v-if="row.status == 0">
              <el-button @click="verify(row.id)" size="small" type="primary" icon="ios-create">处理完成</el-button>
              <el-divider direction="vertical" />
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <el-pagination
          :total="total"
          :current-page="thisForm.page"
          show-elevator
          show-total
          @current-change="pageChange"
          :page-size="thisForm.limit"
        />
      </div>
    </el-card>
  </div>
</template>
    
    <script>
import { getFeedBackList, accomplishFeedBack } from '@/api/onsite';
export default {
  name: 'order_comment',
  data() {
    return {
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      loading: false,
      options: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()));
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(
                start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1)),
              );
              end.setTime(end.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())));
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近7天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(
                start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 6)),
              );
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近30天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(
                start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 29)),
              );
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '本月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), 1)));
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '本年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.setTime(new Date(new Date().getFullYear(), 0, 1)));
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
      timeVal: [],
      thisForm: {
        page: 1,
        limit: 10,
        time: '',
        keywords: '',
        status: '',
      },
      lists: [],
      timeVal: [],
      statusList: [
        { label: '全部', val: '' },
        { label: '待处理', val: '0' },
        { label: '已通过', val: '10' },
      ],
      total: 0,
    };
  },

  created() {
    this.getList();
  },
  methods: {
    // 选择日期
    onchangeTime(e) {
      this.timeVal = e;
      this.thisForm.time = this.timeVal[0] ? this.timeVal.join('_') : '';
      this.getList();
    },
    //订单评价列表
    getList() {
      this.loading = true;
      getFeedBackList(this.thisForm)
        .then(async (res) => {
          let data = res;
          this.lists = data.list;
          this.total = data.total;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.msg);
        });
    },
    pageChange(index) {
      this.thisForm.page = index;
      this.getList();
    },
    //修改
    edit(id) {
      this.$modalForm(orderCommentAddApi(id)).then(() => this.getList());
    },
    // 图片显示
    show(type) {
      let viewer = this.$el.querySelector('.' + type).$viewer;
      viewer.show();
    },
    //状态审核
    verify(id) {
      let that = this;
      this.$confirm('确认处理完成','确定要处理完成了吗？').then(()=>{
        accomplishFeedBack({ id,status:10 }).then((res) => {
            console.log(res);
            that.$message.success('处理成功');
            that.getList();
          });
      })
        
    },
    importForm() {
      this.$modalForm(importForm({})).then(() => this.getList());
    },
    // 表格搜索
    userSearchs() {
      this.thisForm.page = 1;
      this.getList();
    },
    // 删除
    del(row, tit, num) {
      let delfromData = {
        title: tit,
        num: num,
        url: `onsite/order_comment/del/${row.id}`,
        method: 'DELETE',
        ids: '',
      };
      this.$modalSure(delfromData)
        .then((res) => {
          this.$Message.success(res.msg);
          this.lists.splice(num, 1);
          this.getList();
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
  },
};
</script>
    
    <style scoped lang="stylus">
    .tabBox_img {
      display: flex;
    }

    .img {
      margin-right: 5px;
    }
</style>
    
    
    
    